<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="jobs"
            border
            style="width: 100%">
        <el-table-column
                label="任务名称"
                prop="jobName">
        </el-table-column>
        <el-table-column
                label="工作组名称"
                prop="jobGroupName">
        </el-table-column>
        <el-table-column
                label="触发器名称"
                prop="triggerName">
        </el-table-column>
        <el-table-column
                label="触发器组名称"
                prop="jobGroupName">
        </el-table-column>
        <el-table-column
                label="工作组名称"
                prop="triggerGroupName">
        </el-table-column>
        <el-table-column
                label="类名称"
                prop="className">
        </el-table-column>
        <el-table-column
                label="调用时间"
                prop="cron">
        </el-table-column>
        <el-table-column
                label="工作状态"
        prop="states"
        :formatter="formatterStates">
        </el-table-column>
        <el-table-column
                width="280" fixed="right">
            <template slot-scope="scope">
                <el-button v-show="scope.row.states==='true'"
                        size="mini"
                           type="success"
                        @click="trigger(scope.row)">暂停</el-button>
                <el-button v-show="scope.row.states!='true'"
                           size="mini"
                           type="success"
                           @click="trigger(scope.row)">启动</el-button>
                <el-button
                        v-show="scope.row.states!='true'"
                        size="mini"
                        type="warning"
                        @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
        <el-button @click="add">新增</el-button>
    </div>

    <el-dialog :visible.sync="showForm" width="70%">
        <el-form label-width="150px" >
            <el-form-item  label="工作名称" prop="jobName">
                <el-input v-model="FormData.jobName"></el-input>
            </el-form-item >
            <el-form-item
                    label="工作组名称"
                    prop="jobGroupName">
                <el-input v-model="FormData.jobGroupName"></el-input>
            </el-form-item >
            <el-form-item
                    label="触发器名称"
                    prop="triggerName">
                <el-input v-model="FormData.triggerName"></el-input>
            </el-form-item >
            <el-form-item
                    label="触发器组名称"
                    prop="triggerGroupName">
                <el-input v-model="FormData.triggerGroupName"></el-input>
            </el-form-item >
            <el-form-item
                    label="类名称"
                    prop="className">
                <el-input v-model="FormData.className"></el-input>
            </el-form-item >
            <el-form-item
                    label="调用时间"
                    prop="cron">
                <el-input v-model="FormData.cron"></el-input>
            </el-form-item >
            <!--<el-form-item
                    label="工作状态">
                <el-switch
                        active-value="true"
                        inactive-value="false"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item >-->
            <el-form-item style="text-align: right">
                <el-button type="primary" round v-on:click="cancel">取消</el-button>
                <el-button type="danger" round v-on:click="handleDelete">删除</el-button>
                <el-button type="success" round v-on:click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        created(){
            let there = this;
            axios({
                method: 'get',
                url: '/jobs/findAll'
            }).then(function (res) {
                there.jobs = res.data.data.jobs;
               console.log(res);
            }).catch(function (err) {
                    console.log(err);
                });
        },
        mounted(){
            //this.timer = setInterval(this.fleshList, 1000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        data() {
            return {
                jobs: [],
                search: '',
                FormData:{},
                showForm:false,
                timer:''
            }
        },
        methods: {
            formatterStates(row){
                if(row.states == 'true'){
                    return '正在运行'
                }else {
                    return '未启动'
                }
            },
            handleEdit(index, row) {
                this.FormData = row;
                this.showForm = true;
            },
            handleDelete() {
                let there = this;
                axios({
                    method: 'delete',
                    url: '/jobs/del?id='+there.FormData.id
                }).then(function (res) {
                    there.fleshList();
                    there.showForm = false;
                    console.log(res)
                }).catch(function (err) {
                    console.log(err);
                });
            },
            cancel(){
                this.showForm = false;
            },
            save(){
                let there = this;
                axios({
                    method: 'post',
                    url: '/jobs/save',
                    data:there.FormData
                }).then(function (res) {
                    console.log(there.jobs);
                    there.fleshList();
                    this.showForm = false;
                }).catch(function (err) {
                    console.log(err);
                });
            },
            add(){
                this.FormData = {}
                this.showForm = true;
            },
            fleshList(){
                let there = this;
                axios({
                    method: 'get',
                    url: '/jobs/findAll'
                }).then(function (res) {
                    there.jobs = res.data.data.jobs;
                    console.log(there.jobs);
                }).catch(function (err) {
                    console.log(err);
                });
            },
            trigger(row){
                axios({
                    method: 'get',
                    url: '/jobs/trigger?id='+row.id
                }).then(function (res) {
                    console.log(res);
                }).catch(function (err) {
                    console.log(err);
                });
                this.fleshList();
            }
        },
    })
</script>
</html>